// 导入创建切片的方法
import { createSlice } from '@reduxjs/toolkit'

import { getBannerListData, getProListData } from '../../api/home'

export const homeSlice = createSlice({
    name: 'home', // 定义模块的名称，切片名称
    initialState: { // 和 vuex 中的 state 是一样的，放全局状态的地方
        // 全局数据
        bannerList: [],
        proList: []
    },
    reducers: { // 和 vuex 中的 mutations 一样的功能
        // 修改数据的方法
        changeBannerList(state, actions) {
            state.bannerList = actions.payload
        },
        changeProList(state, actions) {
            state.proList = actions.payload
        }
    }
})

// 导出修改方法
export const { changeBannerList, changeProList } = homeSlice.actions

// 如果需要做异步处理，可以单独写一个异步函数
export function getBannerListAction(dispatch) {
    // 这里可以做异步的操作
    getBannerListData().then(res => {
        dispatch(changeBannerList(res.data.data))
    })
}

// 接收参数
export function getProListAction(data) {
    // console.log(111111, data);

    // 如果异步需要接收参数那么我们需要再异步方法中写一个返回值
    // 返回值是一个函数，函数中的参数为 dispatch

    return (dispatch) => {
        getProListData(data).then(res => {
            dispatch(changeProList(res.data.data))
        })
    }
}



// 导出 reducer
export default homeSlice.reducer
